<template>
  <div>Home</div>
  <span>展示count ： {{ $store.state.count }}</span>
  <br />
  <span>展示name ： {{ $store.state.info.name }}</span>
  <br />
  <button @click="$store.commit('increment')">点击</button>
  <button @click="$store.commit('increment', 10)">点击 + 10</button>
  <button @click="addClick">点击 + 20</button>
  <button @click="addClickS">点击 + 100</button>
  <button @click="addClickObj">点击changeName</button>
  <button @click="addClickObj2">点击changeName2</button>
</template>

<script>
import { useStore } from 'vuex'
export default {
  methods: {
    addClick() {
      this.$store.commit('increment', 20)
    },
  },
  setup() {
    const store = useStore()
    const addClickS = () => {
      store.commit('increment', 100)
    }
    const addClickObj = () => {
      store.commit('changeName', { name: 'qq' })
    }
    const addClickObj2 = () => {
      // 其他参数会放在payload中
      store.commit({
        type: 'changeName',
        name: 'aa',
      })
    }

    return {
      addClickS,
      addClickObj,
      addClickObj2,
    }
  },
}
</script>

<style lang="scss" scoped></style>
